<template>
  <w-modal
    ref="WModal"
    title="其他文字识别"
    :ok-text="identifyData ? '清除' : '识别'"
    :ok-type="identifyData ? 'danger' : 'primary'"
    @ok="okClick"
  >
    <div class="from-box">
      <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 7 }">
        <a-form-item label="图片">
          <image-up ref="WImageUp" />
        </a-form-item>
        <a-form-item label="请选择识别类型">
          <a-select v-model="keyName">
            <a-select-option v-for="item in typeArr" :key="item.key" :value="item.key">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
      <a-button class="json-btn" type="primary" size="small" @click="jsonBtnClick">
        JSON格式化
      </a-button>
      <a-button v-if="identifyData" class="copy-btn" type="primary" size="small" @click="copyBtnClick">
        拷贝
      </a-button>
      <p class="json-show">
        当前没有处理接口数据，所以自己拷贝到JSON格式化自行查看
      </p>
    </div>
    <br>
    <div v-if="identifyData">
      {{ identifyData }}
    </div>
  </w-modal>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Api } from '@/config/api'
import ImageUp from '@/components/global/imageUp/server'
import WModal, { ModalComType } from '@/components/global/modal'

@Component({
  name: 'WebToolImageIdentifyBackcard',
  components: {
    ImageUp,
    WModal
  }
})
export default class WebToolImageIdentifyBackcard extends Vue {
  // 识别类型数组
  typeArr = [
    {
      name: '驾驶证识别',
      key: 'drivingLicense'
    },
    {
      name: '行驶证识别',
      key: 'vehicleLicense'
    },
    {
      name: '车牌识别',
      key: 'licensePlate'
    },
    {
      name: '营业执照识别',
      key: 'businessLicense'
    },
    {
      name: '通用票据识别',
      key: 'receipt'
    },
    {
      name: '火车票识别',
      key: 'trainTicket'
    },
    {
      name: '出租车票识别',
      key: 'taxiReceipt'
    },
    {
      name: '表格文字识别',
      key: 'form'
    },
    {
      name: '定额发票识别',
      key: 'quotaInvoice'
    },
    {
      name: '户口本识别',
      key: 'householdRegister'
    },
    {
      name: '港澳通行证识别',
      key: 'HKMacauExitentrypermit'
    },
    {
      name: '台湾通行证识别',
      key: 'taiwanExitentrypermit'
    },
    {
      name: '出生医学证明识别',
      key: 'birthCertificate'
    },
    {
      name: '机动车销售发票识别',
      key: 'vehicleInvoice'
    },
    {
      name: '车辆合格证识别',
      key: 'vehicleCertificate'
    },
    {
      name: '税务局通用机打发票识别',
      key: 'invoice'
    },
    {
      name: '行程单识别',
      key: 'airTicket'
    },
    {
      name: '保单识别',
      key: 'insuranceDocuments'
    },
    {
      name: '增值税发票识别',
      key: 'vatInvoice'
    },
    {
      name: '数字识别',
      key: 'numbers'
    },
    {
      name: '彩票识别',
      key: 'lottery'
    },
    {
      name: '护照识别',
      key: 'passport'
    },
    {
      name: '名片识别',
      key: 'businessCard'
    },
    {
      name: '手写文字识别',
      key: 'handwriting'
    }
  ];

  // 识别出的文字
  identifyData = null;
  // 识别键值
  keyName = '';
  // 图片识别按钮点击
  imageInentify () {
    if (!this.keyName) {
      this.$message.error('请选择识别类型')
      return
    }
    (this.$refs.WModal as ModalComType).showLoading()
    this.identifyData = null;
    (this.$refs.WImageUp as any)
      .upImage()
      .then((data: any) => {
        this.$wAxios
          .$post(Api.baidu.otherIdentify, {
            localPath: data.filepath,
            keyName: this.keyName
          })
          .then((data) => {
            this.identifyData = data
          })
          .catch(() => {
            this.identifyData = null
          })
          .finally(() => {
            (this.$refs.WModal as ModalComType).hideLoading()
          })
      })
      .catch((err: any) => {
        this.$message.error(err.msg);
        (this.$refs.WModal as ModalComType).hideLoading()
      })
  }

  /**
   * 显示弹窗
   */
  show () {
    (this.$refs.WModal as ModalComType).show()
  }

  /**
   * 清除按钮点击
   */
  clear () {
    this.identifyData = null;
    (this.$refs.WImageUp as any).clear()
  }

  copyBtnClick () {
    const str = JSON.stringify(this.identifyData)
    this.$wCopy(str)
  }

  jsonBtnClick () {
    window.open('https://cdn.wangyabin.top/Extension/json-editer/index.html')
  }

  okClick () {
    if (this.identifyData) {
      this.clear()
    } else {
      this.imageInentify()
    }
  }
}
</script>

<style scoped lang="less">
.from-box {
  position: relative;
  .type-option {
    position: absolute;
    right: 0;
    top: 0;
  }
  .json-btn {
    position: absolute;
    right: 0;
    top: 50px;
  }
  .copy-btn {
    position: absolute;
    right: 0;
    top: 0px;
  }
  .json-show {
    position: absolute;
    width: 240px;
    right: 0;
    top: 100px;
    font-size: 18px;
    color: #aaa;
    line-height: 22px;
  }
}
</style>
